<template>
  <div>
    <el-dialog
      :title="this.$t('common.Add')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('WarehouseManagementLang.name')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.name_value"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('DeliveryOrderManagementLang.date')}}:
              </div>
              <div class="contant">
                <el-date-picker
                  ref="publish_time"
                  v-model="data.publish_time"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ReservoirRegionLang.wagon_number')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="wagon_number_value"
                  @blur="handleBlur('wagon_number_value',$event)"
                  @focus="handleFocus($event)"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.wagon_number_value"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ReservoirRegionLang.drivers_phone_number')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="drivers_phone_number_value"
                  @blur="handleBlur('drivers_phone_number_value',$event)"
                  @focus="handleFocus($event)"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.drivers_phone_number_value"
                ></el-input>
              </div>
            </div>
            
          </div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ReservoirRegionLang.cases')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.cases_value"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ReservoirRegionLang.quantity')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.quantity_value"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ReservoirRegionLang.loading_fee')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.loading_fee_value"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ReservoirRegionLang.fare')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.loading_fee_value"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressCargoManagementLang.Goods_information')}}</div>
          <div style="margin:5px 0;">
            <span>{{$t('ExpressOrderManagementLang.Number_packages')}}：</span>
            <el-input-number
              style="width:100px"
              controls-position="right"
              size="small" 
              :min="0"  
              v-model="premium_num">
            </el-input-number>
            <img  @click="setPremium" style="width:24px;marginLeft: 5px;cursor: pointer;" src="../../assets/img/true_btn.png" alt="">
          </div>
          <div style="display:flex; margin-bottom: 5px;gap:10px">
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="addItem()">
              <img style="width:12px;height:12px;" src="../../assets/img/add.png" alt="">
              <span>{{$t('common.Add')}}</span>
            </div>
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="delItem()">
              <img style="width:12px;height:12px;" src="../../assets/img/del.png" alt="">
              <span>{{$t('common.del')}}</span>
            </div>
          </div>
          <MyTable
            :tableColumn="tableColumn"
            :tableData="tableData"
            :isOrder="false"
            @sendCurrentData="setCurrent"
            @sendTabClick="setTabClick"
          >
            <template v-slot:content="scope">
              <span v-if="scope.config.templateType=='Select_customer'">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                  <el-select
                    v-fo-select
                    @change="selectChange_customer(scope.row,scope.config.prop)"
                    @visible-change="inputType"
                    v-model="scope.row[scope.config.prop]"
                  >
                    <el-option
                      v-for="item in options_customer"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>  
                </span>
                <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
              </span>
              <span v-else-if="scope.config.templateType=='Select'">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                  <el-select
                    v-fo-select
                    @change="selectChange(scope.row,scope.config.prop)"
                    @visible-change="inputType"
                    v-model="scope.row[scope.config.prop]"
                  >
                    <el-option
                      v-for="item in options_type"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>  
                </span>
                <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
              </span>
              <span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
               <el-input
                  v-fo 
                  v-if="scope.config.templateType=='Input'"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  v-model="scope.row[scope.config.prop]"
                ></el-input>
                <el-input-number v-fo v-noFocu v-else-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="scope.config.precision" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number> 
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      data:{
        name_value:'',
        publish_time:'',
        wagon_number_value:'',
        drivers_phone_number_value:'',
        cases_value:'',
        quantity_value:'',
        loading_fee_value:'',
        fare_value:'',
      },
      loadSelectPageInfo:{
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      },
      options_customer:[],

      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.customer'),
          prop: "customer_value",
          width: 120,
          templateType:'Select_customer',
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.SKU'),
          prop: "SKU_value",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.typeName'),
          prop: "typeName_value",
          width: 120,
          templateType:'Select',
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.ticket_number'),
          prop: "ticket_number",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ReservoirRegionLang.box_no'),
          prop: "box_no_value",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.cases'),
          prop: "cases_value",
          width: 120,
          templateType:'InputNumber',
          precision:0,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.quantity'),
          prop: "quantity_value",
          width: 120,
          templateType:'InputNumber',
          precision:0,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.volum'),
          prop: "volum_value",
          width: 120,
          templateType:'InputNumber',
          precision:5,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.loading_sequence'),
          prop: "loading_sequence_value",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.receiving_address'),
          prop: "receiving_address_value",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.customer_phone'),
          prop: "customer_phone_value",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.loading_fee'),
          prop: "loading_fee_value",
          width: 120,
          templateType:'InputNumber',
          precision:2,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.fare'),
          prop: "fare_value",
          width: 120,
          templateType:'InputNumber',
          precision:2,
        },
      ],
      tableData: [],
      sendDataObj:{},
      premium_num:0,
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
    window.addEventListener("keydown", this.keydownFuc);
    window.addEventListener("keyup", this.keyupFuc);
  },
  destroyed(){
    window.removeEventListener("keydown", this.keydownFuc);
    window.removeEventListener("keyup", this.keyupFuc);
  },
  watch: {
  },
  methods: {
   
    init() {
      this.getOptions()
      this.Visible = true;
    },
    keydownFuc(){
      this.isCodeDown=true
      let code=window.event
      let index=this.tableColumn.findIndex(item=>{return item.label===this.tabClickLabel})
      if(index!=-1){
        if(code.key=='Tab'&&code.keyCode==9){
          code.preventDefault()
          this.setTabLabel(this.tableColumn,index+1)
        }
      }
    },
    keyupFuc(){
      this.isCodeDown=false
    },
    setTabLabel(arr,index){
      if(index>arr.length-1){
        this.setTabLabel(arr,0)
      }else{
        if(!!arr[index]&&!!arr[index].templateType){
          this.tabClickLabel=arr[index].label
        }else{
          this.setTabLabel(arr,index+1)
        }
      }
    },
    //获取下拉单数据
    getOptions(){
      //获取客户列表
      this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    loadData(){
      if(this.loadSelectPageInfo.page<this.loadSelectPageInfo.page_all){
        this.loadSelectPageInfo.page++
        this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
          this.options_customer.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.loadSelectPageInfo.page=1
      this.loadSelectPageInfo.keyword=value
      this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    //自定义多选下拉框
    selectBlur(name){
      this.loadSelectPageInfo={
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      }
      this.filterDataFun('')
      if (this.data[name] === ""||!this.data[name]&&this.data[name]!==0) {
        this.$refs[name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
      }
    },
    LoadselectChange(obj){
      this.data[obj.name]=obj.value
      if (this.data[obj.name].length===0) {
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    addItem(){
      let obj={
        id:this.tableData.length+1,
        goods_name:'',
        goods_price:'',
        goods_num:'',
      }
      this.tableData.push(obj)
      this.tableData.forEach((item,k)=>{
        item.table_code=k+1
      })
    },
    delItem(){
      this.tableData=this.tableData.filter(item=>{return item.id!=this.sendDataObj_goods.id})
      this.tableData.forEach((item,k)=>{
        item.table_code=k+1
      })
    },
    setPremium(){
      let num=this.premium_num-this.tableData.length
      if(num>0){
        for(var i=0;i<num;i++){
          this.addItem()
        }
      }
      if(num<0){
        this.tableData.splice(this.premium_num)
      }
    },
    // 提交修改
    confirm() {
      let type=true
      if (!this.data.uid&&this.data.uid!==0) {
        this.$refs.uid.$el.childNodes[0].childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if (!this.data.ticket_number) {
        this.$refs.ticket_number.$el.childNodes[1].style.border = "1px solid red";
        type = false;
      }

      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("uid", this.data.uid);
        params.append("lid", this.data.lid);
        params.append("start_local", this.data.start_local);
        params.append("storage_area_code", this.data.storage_area_code);
        params.append("is_insure", this.data.is_insure);
        params.append("insure_price", this.data.insure_price);
        // params.append("premium_rate", this.data.premium_rate);
        params.append("remark", this.data.remark);
        params.append("recive_information", JSON.stringify(this.recive_arr));
        params.append("pickup_information", JSON.stringify(this.pickup_arr));
        params.append("goods", JSON.stringify(this.tableData));
        params.append("packages", JSON.stringify(this.tableData));

        this.$postForm("addOrder", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    setCurrent (data){
      this.sendDataObj=data
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      if(!this.isCodeDown){
        this.tabClickIndex = null
        this.tabClickLabel = null
      }
    },
    //取消修改
    cancel() {
      this.data={
        name_value:'',
        uid:'',
        ticket_number:'',
        publish_time:'',
        cases_value:'',
        volum_value:'',
        quantity_value:'',
      }
      this.premium_num=0
      this.options_customer=[],
      this.tableData=[]
      this.tableData=[]
      this.tabClickIndex = null
      this.tabClickLabel = null   
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    selectChange_customer(row,prop){
      row[prop+'_name']=this.options_type.filter(item=>{return item.id==row[prop]}).length>0?this.options_type.filter(item=>{return item.id==row[prop]})[0].name:''
    },
    selectChange(row,prop){
      row[prop+'_name']=this.options_customer.filter(item=>{return item.id==row[prop]}).length>0?this.options_customer.filter(item=>{return item.id==row[prop]})[0].name:''
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    // 计总
    setTotalize(){
      // this.data.insure_costs=this.$computing(this.data.insure_price*this.data.premium_rate/100,'fixed',4)
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
</style>